<template>
    <!-- 已签署合同 -->
    <div class="gd-main" style="padding:0;">
        
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    
    export default {
        computed:{
            //登录后的数据在这里进行给实例赋值，就可以用 this.xxx 进行访问了
          ...mapGetters(['userId','currId','roleId','verificationStatus'])  
        },
        props:['url']
        // 页面上需要展示的数据都要在 [data方法] 的 return 语句返回的对象里存在声明，否则会报错 
        data() {
            return {
                //项目数量
                projectCount: 0,
                //待签订合同数
                signedContractCount: 0,
                //表单数据 - 项目名称
                form:{
                    projectName: '',
                    //表单 - 项目状态
                    projectStatus: '',
                    //总承包单位
                    mainConstractor:''
                },
                //表单下拉框 - 项目状态选项
                projectStatusOptions: [{
                    value: '1',
                    label: '进行中'
                }, {
                    value: '2',
                    label: '未开始'
                }, {
                    value: '3',
                    label: '已结束'
                }],
                //表单下拉框 - 总承包单位
                mainConstractorOptions: [{
                    value: '1',
                    label: '中铁十二局'
                }, {
                    value: '2',
                    label: '中国铁建'
                }, {
                    value: '3',
                    label: '一汽集团'
                }],
                //表单验证规则 [ 也可以自己配置验证规则 ]
                rules:{
                    //项目名称验证
                    projectName:[{required:true,message:'请输入项目名称',trigger:'change'}],
                    //项目状态验证
                    projectStatus:[{required:true,message:'请输入项目名称',trigger:'change'}],
                    //总承包单位
                    mainConstractor:[{required:true,message:'请输入项目名称',trigger:'change'}]
                },
                //表格数据
                tableData: [{
                        col1: '在建',
                        col2: '金科路项目',
                        col3: '中铁十二局',
                        col4: 6
                    }],
                //分页配置
                pagination: {
                    //总数据 - 查询一次后服务器进行返回
                    total:200,
                    //页码按钮数量
                    pagerCount:7,
                    //当前选中的页码
                    currentPage: 1,
                    //可选的每页显示数量
                    pageSizes:[10,20,30,40,50],
                    //每页显示的数量
                    pageSize:10
                }
            }
        },
        methods: {
            //提交表单
            onSubmit(formRef){
                this.$refs[formRef].validate((valid) => {
                    //验证通过
                    if(valid){
                        console.log('表单项验证通过');
                        //进行相关操作 - 查询数据
                    }
                });
            },
            //切换每页显示的数量量
            handleSizeChange(val) {
                console.log('每页显示' + val + '条数据');
                //进行相关操作 - 查询数据
            },
            //选中的页码
            handleCurrentChange(val) {
                console.log('点击了第 ' + val + '页');
                //进行相关操作 - 查询数据
            },
            //查看已签订合同列表 - 跳转至 【路由path】: /subcontract/signedContract - 【路由name】: SignedSubcontract
            signedContract(curRow){
                //根据参数进行跳转
                this.$router({
                    //跳转至 【已签订分包合同 列表页】
                    name:'SignedSubcontract',
                    //查询对象 - 传递必要的参数
                    query:{
                        //示例: test1 & test2 为跳转至 【已签订分包合同 列表页】传递的参数
                        //【已签订分包合同 列表页】调用 this.$route.query 即可获得此对象
                        col1:curRow.col1,
                        col2:curRow.col2
                    }
                });
            }
        },
        //vue 实例的模版渲染完成后执行
        mounted() {
            
        }
    }
</script>